// -------------------------------------
// Colors guideline page
// -------------------------------------
.guidelineColor__palette {
  padding: $euiSize;
  padding-bottom: $euiSizeXL;
}

.guidelineColor__swatch {
  height: $euiSizeM;
  width: $euiSizeM;
  border-radius: 50%;
}

.guidelineColor__stripe {
  height: $euiSizeL;
  line-height: $euiSizeL;
}

.guidelineColor__test {
  text-align: center;
  font-size: $euiFontSizeS;
}

// sass-lint:disable no-important
.guidelineColor__title {
  color: $euiColorMediumShade !important;
}

.guideColorPalette__swatch {
  span {
    height: $euiSize;
    width: $euiSizeL;
  }

  &--small span {
    width: auto;
    height: $euiSizeS;
  }
}

.guideColorPalette__swatchHolder {
  border-radius: $euiBorderRadius;
  overflow: hidden;
}

// -------------------------------------
// Sass guideline page
// -------------------------------------
.guideSass__swatchItem + .guideSass__swatchItem {
  margin-top: $euiSize;
}

.guideSass__swatch {
  height: $euiSizeL;
  width: $euiSizeL;
}

.guideSass__swatch--danger {
  background: $euiColorDanger;
}

.guideSass__swatch--dangerTint {
  background: tint($euiColorDanger, 30%);
}

.guideSass__swatch--dangerShade {
  background: shade($euiColorDanger, 30%);
}

// sass-lint:disable no-color-literals
.guideSass__swatch--primaryLight {
  background: #0079A5;
}

// sass-lint:disable no-color-literals
.guideSass__swatch--primaryDark {
  background: #4DA1C0;
}

.guideSass__levelRow {
  padding-left: $euiSizeS;
}

.guideSass__levelRow + .guideSass__levelRow {
  margin-top: $euiSizeS;
}

.guideSass__level {
  background-color: $euiColorMediumShade;
  transform: scaleY(.5) rotate(30deg) skew(-30deg, 0deg);
  width: $euiSize;
  height: $euiSize;
}

.guideSass__sizeRow + .guideSass__sizeRow {
  margin-top: $euiSize;
}

.guideSass__size {
  background-color: $euiColorFullShade;
  display: inline-block;
}

.guideSass__sizeItem {
  width: $euiSizeXXL;
  text-align: right;
}

.guideSass__fontSizeExample + .guideSass__fontSizeExample {
  margin-top: $euiSizeL;
}

.guideSass__fontSize {
  margin-bottom: $euiSizeS;
}

.guideSass__fontSize--euiFontSizeXS {
  @include euiFontSizeXS;
}

.guideSass__fontSize--euiFontSizeS {
  @include euiFontSizeS;
}

.guideSass__fontSize--euiFontSizeM {
  @include euiFontSizeM;
}

.guideSass__fontSize--euiFontSize {
  @include euiFontSize;
}

.guideSass__fontSize--euiFontSizeL {
  @include euiFontSizeL;
}

.guideSass__fontSize--euiFontSizeXL {
  @include euiFontSizeXL;
}

.guideSass__fontSize--euiFontSizeXXL {
  @include euiFontSizeXL;
}

.guideSass__shadow {
  padding: $euiSizeXXL;
  background: $euiColorEmptyShade;
  border-radius: $euiBorderRadius;

  & + .guideSass__shadow {
    margin-top: $euiSizeXL;
  }
}

.colorGuidelines_colorPreviewTooLight rect {
  stroke: transparentize($euiColorLightShade, lightOrDarkTheme(.5, 0));
  stroke-width: .25px;
}

.guideSass__shadow--euiSlightShadow { @include euiSlightShadow; }
.guideSass__shadow--euiBottomShadowSmall { @include euiBottomShadowSmall; }
.guideSass__shadow--euiBottomShadowMedium { @include euiBottomShadowMedium; }
.guideSass__shadow--euiBottomShadowFlat { @include euiBottomShadowFlat; }
.guideSass__shadow--euiBottomShadow { @include euiBottomShadow; }
.guideSass__shadow--euiBottomShadowLarge { @include euiBottomShadowLarge; }

.guideSass__overflowShadows {
  overflow-y: hidden;
  height: 200px;

  .guideSass__overflowShadowText {
    @include euiYScrollWithShadows;
    padding: $euiSizeS;
  }
}

.guideSass__overflowShadowsX {
  @include euiXScrollWithShadows;
  padding: $euiSizeS $euiSizeS 0;

  .guideSass__overflowShadowTextX {
    width: 150%;
  }
}

.guideSass__shadow--color {
  @include euiBottomShadowLarge(desaturate($euiColorPrimary, 30%));
}

.guideSass__border {
  display: flex;
  padding: $euiSize;
}

.guideSass__border--radius {
  border: $euiBorderThin;
  border-radius: $euiBorderRadius;
}

.guideSass__border--euiBorderThin {
  border: $euiBorderThin;
}

.guideSass__border--euiBorderThick {
  border: $euiBorderThick;
}

.guideSass__border--euiBorderEditable {
  border: $euiBorderEditable;
}

.guideSass__fontFamily {
  font-size: $euiSizeL;
  background: $euiColorDarkestShade;
  text-align: center;
  width: $euiSizeXL * 2;
  height: $euiSizeXL;
  line-height: $euiSizeXL;
  color: $euiColorEmptyShade;

  &--code {
    @include euiCodeFont;
  }
}

.guideSass__animRow + .guideSass__animRow {
  margin-top: $euiSizeL;
}

.guideSass__animParent {
  background: $euiColorLightestShade;
  height: $euiSize;
  margin-top: $euiSizeS;
  position: relative;
}

.guideSass__animChild {
  width: $euiSize;
  height: $euiSize;
  background: $euiColorDarkestShade;
  position: absolute;
  left: 0;
}

.guideSass__animRow:hover .guideSass__animChild {
  transition-property: left;
  transition-timing-function: linear;
  left: calc(100% - #{$euiSize});
}

.guideSass__animRow--euiAnimSpeedExtraFast:hover .guideSass__animChild {
  transition-duration: $euiAnimSpeedExtraFast;
}

.guideSass__animRow--euiAnimSpeedFast:hover .guideSass__animChild {
  transition-duration: $euiAnimSpeedFast;
}

.guideSass__animRow--euiAnimSpeedNormal:hover .guideSass__animChild {
  transition-duration: $euiAnimSpeedNormal;
}

.guideSass__animRow--euiAnimSpeedSlow:hover .guideSass__animChild {
  transition-duration: $euiAnimSpeedSlow;
}

.guideSass__animRow--euiAnimSpeedExtraSlow:hover .guideSass__animChild {
  transition-duration: $euiAnimSpeedExtraSlow;
}

.guideSass__animRow--euiAnimSlightBounce:hover .guideSass__animChild {
  transition-timing-function: $euiAnimSlightBounce;
  transition-duration: $euiAnimSpeedSlow;
}

.guideSass__animRow--euiAnimSlightResistance:hover .guideSass__animChild {
  transition-timing-function: $euiAnimSlightResistance;
  transition-duration: $euiAnimSpeedSlow;
}

.guideSass__breakpointExample {
  padding: $euiSize;
  color: $euiColorGhost;
}

.guideSass__themedBox {
  padding: $euiSize;
  border-left: $euiBorderThick;
}

// sass-lint:disable no-color-literals
.guideSass__themedBox--light {
  border-color: #0079A5;
  background: tint(#0079A5, 90%);
  color: #333;
}

.guideSass__themedBox--dark {
  // sass-lint:disable no-color-literals
  border-color: #4DA1C0;
  background: shade(#4DA1C0, 70%);
  color: #FFF;
}

.guideSass__contrastExample {
  $backgroundColor: tintOrShade($euiColorWarning, 90%, 70%);

  background: $backgroundColor;
  color: makeHighContrastColor($euiColorWarning, $backgroundColor);
  padding: $euiSize;
  border-left: $euiBorderThick;
  border-color: $euiColorWarning;

  .square {
    fill: makeGraphicContrastColor($euiColorWarning, $backgroundColor);
    vertical-align: bottom;
  }
}

.guideSection__shadedBox {
  background-color: $euiPageBackgroundColor;
  padding: $euiSize;
  border-radius: $euiBorderRadius;
}

.guideSection__emptyBox {
  background-color: $euiColorEmptyShade;
}

@import 'colors/color_section';

@include euiBreakpoint('xl') {
  .guideSass__breakpointExample {
    background: $euiColorPrimary;

    &:before {
      content: 'You are currently in the xl breakpoint';
    }
  }
}

@include euiBreakpoint('l') {
  .guideSass__breakpointExample {
    background: $euiColorSecondary;

    &:before {
      content: 'You are currently in the l breakpoint';
    }
  }
}

@include euiBreakpoint('m') {
  .guideSass__breakpointExample {
    background: $euiColorAccent;

    &:before {
      content: 'You are currently in the m breakpoint';
    }
  }
}

@include euiBreakpoint('s') {
  .guideSass__breakpointExample {
    background: $euiColorWarning;

    &:before {
      content: 'You are currently in the s breakpoint';
    }
  }
}

@include euiBreakpoint('xs') {
  .guideSass__breakpointExample {
    background: $euiColorDanger;

    &:before {
      content: 'You are currently in the xs breakpoint';
    }
  }
}
